<template>
	<view class="container">
		<com-head textTit="项目评价" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="projectDetails" v-if="details.id">
			<view class="projectInfo">
				<image :src="details.project_images[0]" mode=""></image>
				<view class="info">
					<view class="title">{{details.project_name}}</view>
					<view class="time">项目时长：{{details.duration}}分</view>
					<view class="time store">使用门店：{{details.orders.store.title}}</view>
					<view class="bottom">
						<text class="price">¥{{details.orders_payable}}</text>
						<text class="num">x {{details.number}}</text>
					</view>
				</view>
			</view>
			<!-- 评分 -->
			<view class="evalWrap">
				<view class="evalList">
					<text class="evalTit">项目评分：</text>
					<u-rate :count="5" v-model="form.project_score" inactive-color="#E0E0E0" 
					inactive-icon="star-fill"
					active-color="#E8C778" size="34"></u-rate>
				</view>
				<view class="evalList">
					<text class="evalTit">技师服务：</text>
					<u-rate :count="5" v-model="form.tech_service" inactive-color="#E0E0E0" 
					inactive-icon="star-fill"
					active-color="#E8C778" size="34"></u-rate>
				</view>
				<view class="evalList">
					<text class="evalTit">前台服务：</text>
					<u-rate :count="5" v-model="form.rece_service" inactive-color="#E0E0E0" 
					inactive-icon="star-fill"
					active-color="#E8C778" size="34"></u-rate>
				</view>
				<view class="evalList">
					<text class="evalTit">环境氛围：</text>
					<u-rate :count="5" v-model="form.ambient" inactive-color="#E0E0E0" 
					inactive-icon="star-fill"
					active-color="#E8C778" size="34"></u-rate>
				</view>
			</view>
			<!--  -->
			<view class="tagWrap" >
				<view class="tagList" @click="chioseTag(ele) " :class="ele.isCheck ? 'active'  : '' " v-for="(ele,index) in labelList" :Key="index">
					{{ele.title}}
				</view>
			</view>
			<textarea  v-model="form.content"  placeholder="从多个角度评价宝贝,可以帮助更多需要的人" placeholder-style="color:#999999;font-size:24rpx"/>
		</view>
		<!-- 上传图片 -->
		<view class="uploadImg">
			<view class="tit">上传照片</view>
			<view class="imgbox" >
				<image style="margin-right:20rpx ;" v-if="imgbox.length < 6" @click="uploadPhoto()" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/89765.png" mode="aspectFill"></image>
				<view class="imgWrap" v-for="(ele,index) in imgbox" :key="index" v-if="imgbox.length">
					<u-icon name="close-circle" color="#D5BE82" size="28" @click="deleImg(index)"></u-icon>
					<image :src="ele" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 打赏 -->
		<view class="rewardWrap">
			<view class="rewardLeft"  @click="onceReward(1)">
				<view class="left">
					<view class="tit">打赏技师</view>
					<text class="name" >{{details.staff.name || "无"}}</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="28"></u-icon>
			</view>
			<view class="rewardBtn" @click="giveReward(1)">立即打赏</view>
		</view>
		<!-- <view class="rewardWrap">
			<view class="rewardLeft" @click="onceReward(2)">
				<view class="left">
					<view class="tit">打赏前台</view>
					<text class="name">{{chioseStaff.id ? chioseStaff.name : '请选择'}}</text>
				</view>
				<u-icon name="arrow-right" color="#333" size="28"></u-icon>
			</view>
			<view class="rewardBtn" @click="giveReward(2)">立即打赏</view>
		</view> -->
		<view class="button">
			<view class="common" @click="utlis.backPage()">返回</view>
			<view class="common bg" @click="evaluate()">发布</view>
		</view>
		<!-- 选择前台打赏 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="rewardListWrap">
				<view class="headWrap">
					<view class="serchBox">
						<u-icon name="search" color="#999999" size="30"></u-icon>
						<input @input="serchList(1)" v-model.trim="name" type="text" value="" placeholder="搜索" placeholder-style="color:#999999;font-size:24rpx"/>
					</view>
					<u-icon @click="show = false" name="close" color="#999999" size="30" class="closeBtn"></u-icon>
				</view>
				<scroll-view scroll-y="true" style="height: 550rpx;">
					<view class="contents">
						<view class="list" @click="chiosePersonal(1,ele,index)" v-for="(ele,index) in staffList" :key="index">
							<view class="left">
								<text class="name">{{ele.name}}</text>
								<text class="num">工号： {{ele.number}}</text>
							</view>
							<view class="iconfont " :class="ele.isCeck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
						</view>
					</view>
				</scroll-view>
				<view class="confrim-btn"  @click="show = false">
					确定
				</view>
			</view>
		</u-popup>
		<u-popup v-model="rewardShow" mode="center" >
			<view class="reward">
				<image class="bg" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg99.png" mode=""></image>
				<view class="personInfo">
					<image :src="chioseStaff.avatar ?  chioseStaff.avatar : details.staff.avatar" mode=""></image>
					<view  class="personName">{{chioseStaff.name ? chioseStaff.name : details.staff.name}}</view>
					<!-- <view class="" v-if="!chioseStaff.avatar" style="height: 100rpx;"></view> -->
					<view class="thank">谢谢您的支持和打赏～</view>
					<u-icon @click="rewardShow = false" name="close" color="#999999" size="30"></u-icon>
					<view class="rewardTxt">请输入打赏金额</view>
					<!-- <view class="tabList">
						<view class="tab" @click="chioseTab(index,ele)" :class="tabActive == index ? 'tabActive' : '' " v-for="(ele,index) in tabList" :key="index">{{ele}}元</view>
					</view> -->
					<view class="rewardMoney">
						<input type="number" @input="rewardMoney" v-model="money"  placeholder="最高可打赏100元" placeholder-style="color:#999999;font-size:24rpx"/>
						<text>元</text>
					</view>
					<view class="rewardBtn" @click="giveRewardSubmit()">打赏</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabList:['10','20','50'],
				show1:false,
				name:'',
				money:'',//打赏金额
				staff_id:'',//员工id
				rewardShow:false,
				show:false,
				value:2,
				tag:[{title:"好评",isCheck:false,type:1},{title:"服务",isCheck:false,type:2},{title:"技术",isCheck:false,type:3}],
				activeindex:0,
				list:[],
				staffList:[],//前台列表
				chioseStaff:{},//选择的前台信息
				techList:[],
				chioseTech:{},
				id:'',
				details:{},
				imgbox:[],
				tabActive:10,
				form:{
					project_id:'',
					content:'',
					files:'',
					orders_project_id:'',
					store_id:'',
					project_score:5,
					tech_service:5,
					rece_service:5,
					ambient:5,
					evaluate_label_id:''
				},
				type:0,
				time: "",
				giveMoney:'',
				labelList:[],
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({id}) {
			this.id = id
			this.form.orders_project_id = id
			this.getDetalis()
			this.getEvaluate()
		},
		methods: {
			// 获取评论标签
			async getEvaluate(){
				let {data,code} = await this.$u.api.getEvaluate();
				data.forEach((ele)=>{
					ele.isCheck = false
				})
				this.labelList = data
			},
			rewardMoney(){
				this.tabActive = 10
			},
			chioseTab(index,ele){
				this.money  = ''
				this.giveMoney = ele
				this.tabActive = index
			},
			onceReward(type){
				this.type = type
				if(this.type == 2){
					this.show = true
				}
			},
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					if(this.type == 2){
						this.staffList = []
						this.getPersonal()
					}
				}, 800);
			},
			async getPersonal(){
				let {data,code} = await this.$u.api.getStaff({store_id:this.details.orders.store_id,name:this.name});
				data.forEach((ele)=>{
					ele.isCeck = false
				})
				this.staffList = data
			},
			// 立即打赏
			async giveReward(type){
				this.type = type
				this.money = ""
				this.giveMoney=""
				this.tabActive = 10
				if(this.type == 2 && !this.chioseStaff.id){
					this.utlis.Toast("请选择要打赏的前台")
					return
				}
				if(type == 1){
					this.chioseStaff = {}
					this.staffList.forEach((ele)=>{
						ele.isCeck = false
					})
				}
				this.rewardShow = true
			},
			async giveRewardSubmit(){
				console.log(565, Number.isInteger(+this.money))
				// if (Number.isInteger(+this.money)){
				// 	if (+this.money <1) return this.utlis.Toast("请输入大于0的数字")
				// } else {
				// 	return this.utlis.Toast("请输入数字")
				// }
				if(this.tabActive == 10 && !this.money){
					this.utlis.Toast("请输入/选择打赏金额")
					return
				}
				if(this.tabActive != 10 && this.money){
					if(this.money > 100){
						this.utlis.Toast("最高可打赏100元")
						return
					}
					// if(this.money < 1){
					// 	this.utlis.Toast("打赏金额不能小于1元")
					// 	return
					// }
				}
				let info
				if(this.type == 2){
					 info = {
						store_id:this.details.orders.store_id,
						orders_project_id:this.details.id,
						money: this.tabActive != 10 ? this.giveMoney : this.money,
						staff_id:this.chioseStaff.id,
						orders_id:this.details.orders_id,
						type:this.type
					}
				}else{
					info = {
						store_id:this.details.orders.store_id,
						orders_project_id:this.details.id,
						money:this.tabActive != 10 ? this.giveMoney : this.money,
						staff_id:this.details.staff_id,
						orders_id:this.details.orders_id,
						type:this.type
					}
				}
				this.$u.vuex("rewardInfo",info)
				this.utlis.goUrl(`/pages/order/rewardPay`)
				this.rewardShow = false
				this.money = ""
				this.giveMoney =''
				this.tabActive = 10
			},
			deleImg(index){
				uni.showModal({
				    title: '提示',
				    content: '您确定要删除此图片？',
					confirmColor:'#007664',
				    success: async (res) => {
				        if (res.confirm) {
				            this.imgbox.splice(index,1)
							this.utlis.Toast('删除成功',"success")
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			// 获取详情
			async getDetalis(){
				let {data,code} = await this.$u.api.getComment({id:this.id,type:1});
				if(code){
					data.project_images = data.project_images.split(",")
					this.details = data
					this.form.project_id = this.details.project_id
					this.getPersonal()
				}
			},
			// 上传文件
			uploadPhoto(){
				let that = this
				wx.chooseImage({
					count:6,
					success: (imgRes) => {
						console.log(imgRes)
						let tempFilePaths = imgRes.tempFilePaths
						for (var i=0;i<tempFilePaths.length;i++){
						uni.showLoading({
							title: '文件上传中',
							mask: true,
						   });
						  uni.uploadFile({
							url: that.utlis.baseUrl + '/upload',
							filePath: imgRes.tempFilePaths[i],
							name: 'files',
							header: {
								'storeId': this.store_id
							},
							headers: {
								'Content-Type': 'multipart/form-data' //********划重点
							 },
							success(res) {
								var resdata = JSON.parse(res.data)
								that.utlis.Toast("上传成功","success")
								uni.hideLoading();
								that.imgbox.push(resdata.data)
								console.log(that.imgbox)
							},
							fail: (err) => {
								uni.hideLoading();
								that.utlis.Toast("上传失败")
							}
						})
					 }
					}
				})
			},
			// 评价
			async evaluate(){
				let arr = []
				this.labelList.forEach((ele)=>{
					if(ele.isCheck){
						arr.push(ele.id)
					}
				})
				if(!arr.length){
					this.utlis.Toast("请选择评论标签")
					return
				}else{
					this.form.evaluate_label_id = arr.join(",")
				}
				console.log(this.form.evaluate_label_id,"this.form.evaluate_label_id")
				if(!this.form.content){
					this.utlis.Toast("请输入评论内容")
					return
				}
				this.form.store_id = this.details.orders.store_id
				this.form.files = this.imgbox.join(',')
				let {data,code} = await this.$u.api.setComment(this.form);
				if(code){
					this.utlis.goUrl(`/pages/mine/submitSuccess?type=3`)
					this.utlis.Toast("发布成功","success")
				}
			},
			chioseTag(ele){
				ele.isCheck  = !ele.isCheck
			},
			chiosePersonal(type,ele,index){
				// 员工
				this.staffList.forEach((ele,index1)=>{
					if(index != index1){
						ele.isCeck = false
					}else{
						ele.isCeck = !ele.isCeck
					}
				})
				if(ele.isCeck){
					this.chioseStaff = ele
				}else{
					this.chioseStaff = ""
				}
			}
		}
	}
</script>

<style lang="scss" scoped >
::v-deep .u-drawer-content .u-mode-center-box{
	background-color: transparent;
}
.container{
	padding: 50rpx 32rpx 50rpx 32rpx;
	.icon-weixuanzhong{
		color: #979797;
		font-size: 34rpx;
	}
	.icon-a-xingzhuang1{
		color: #D1B87D;
		font-size: 34rpx;
	}
	.reward{
		width: 468rpx;
		height: 610rpx;
		position: relative;
		// background-color: rgba(0,0,0,.1);
		.bg{
			width: 468rpx;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.personInfo{
			width: 468rpx;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
			// padding: 0 46rpx 0 39rpx;
			text-align: center;
			box-sizing: border-box;
			.rewardBtn{
				width: 344rpx;
				line-height: 74rpx;
				background: linear-gradient(140deg,#50DCC2 0%, #007664);
				border-radius: 68rpx;
				margin: 50rpx auto 0;
				color: #FFFFFF;
				font-size: 32rpx;
				text-align: center;
			}
			.rewardTxt{
				color: #333333;
				font-size: 28rpx;
			}
			.tabList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 37rpx;
				.tab{
					width: 114rpx;
					line-height: 69rpx;
					background:rgba(243,225,220,0.29);
					border-radius: 9rpx;
					text-align: center;
					color: #999999;
					font-size: 24rpx;
				}
				.tabActive{
					color: #007664;
				}
				
			}
			.rewardMoney{
				width: 404rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 69rpx;
				padding: 0 20rpx 0 17rpx;
				background-color: #F8F1D0;
				color: #333333;
				font-size: 24rpx;
				// margin: 28rpx 0 24rpx 0;
				margin: 28rpx auto 24rpx;
				border-radius: 9rpx;
			}
			.personName{
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
			}
			.thank{
				text-align: center;
				color: #666666;
				font-size: 24rpx;
				margin: 19rpx 0 49rpx 0;
			}
			>image{
				display: block;
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin: 17rpx auto 29rpx;
			}
			u-icon{
				position: absolute;right: 26rpx;top: 100rpx;
			}
		}
	}
	.confrim-btn{
		width: 670rpx;
		line-height: 100rpx;
		background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
		border-radius: 14rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 32rpx 0;
	}
	.rewardListWrap{
		width: 750rpx;
		padding: 54rpx 32rpx 0 32rpx;
		.contents{
			padding: 0 32rpx;
		}
		.list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			height: 110rpx;
			border-bottom:1px solid rgba(142,142,142,.24);
			.left{
				display: flex;
				align-items: center;
			}
			.name{
				display: block;
				width: 120rpx;
				font-size: 26rpx;
			}
			.num{
				font-size: 24rpx;
			}
		}
		.list:last-child{
			border-bottom:1px solid #FFFFFF;
		}
		.headWrap{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 4rpx;
			margin-bottom: 20rpx;
			.serchBox{
				display: flex;
				width: 596rpx;
				height: 70rpx;
				opacity: 1;
				background: #f6f7fa;
				border-radius: 20rpx;
				align-items: center;
				padding: 0 24rpx;
				box-sizing: border-box;
				input{
					margin-left: 19rpx;
					color: #333333;
				}
			}
			.closeBtn{
				margin-right: 6rpx;
			}
		}
		.contents{
			
		}
	}
	.button{
		margin-top: 74rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 100rpx;
		.common{
			width: 310rpx;
			line-height: 100rpx;
			border: 1rpx solid #007664;
			border-radius: 48rpx;
			color: #007664;
			font-size: 32rpx;
			text-align: center;
		}
		.bg{
			background: linear-gradient(135deg, #50DCC2 0%,  #007664);
			color: #FFFFFF;
			border: none;
		}
		
	}
	.rewardWrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		.rewardLeft{
			display: flex;
			justify-content: space-between;
			width: 509rpx;
			height: 97rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 0 19rpx 0 32rpx;
			color: #333333;
			.left{
				display: flex;
				align-items: center;
			}
			.tit{
				font-size: 26rpx;
				margin-right: 37rpx;
			}
			.name{
				font-size: 24rpx;
			}
		}
		.rewardBtn{
			width: 145rpx;
			line-height: 96rpx;
			background: #ffffff;
			border-radius: 8rpx;
			text-align: center;
			color: #007664;
			font-size: 24rpx;
		}
	}
	.uploadImg{
		padding: 32rpx 32rpx 32rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 30rpx;
		.tit{
			color: #333333;
			font-size: 26rpx;
			margin-bottom: 28rpx;
		}
		.imgbox{
			display: flex;
			flex-wrap: wrap;
			.imgWrap{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 22rpx;
				position: relative;
				u-icon{
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			image{
				width: 140rpx;
				height: 140rpx;
				background: #f6f7fa;
			}
			.imgWrap:nth-child(4n+4){
				margin-right: 0;
			}
		}
	}
	.projectDetails{
		width: 686rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx 32rpx 27rpx 32rpx;
		box-sizing: border-box;
		textarea{
			width: 89%;
			padding: 16rpx 33rpx;
			background-color: #F6F7FA;
			color: #333333;
			height: 204rpx;
			border-radius: 4rpx;
		}
		.tagWrap{
			margin: 32rpx 0 20rpx 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.tagList{
				padding: 0 14rpx;
				// width: 118rpx;
				line-height: 52rpx;
				background: rgba(194,194,194,.1);
			    color: #666666;
			    font-size: 24rpx;
				margin-right: 20rpx;
				text-align: center;
				margin-bottom: 20rpx;
				border-radius: 6rpx;
			}
			.active{
				color: #007664;
				background-color: #E7FFFB;
			}
		}
		.evalWrap{
			.evalList{
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 24rpx;
				margin-bottom: 24rpx;
				.evalTit{
					margin-right: 16rpx;
				}
			}
		}
		.projectInfo{
			display: flex;
			margin-bottom: 42rpx;
			image{
				width: 161rpx;
				height: 161rpx;
				border-radius: 20rpx;
				flex: none;
				margin-right: 24rpx;
			}
			.info{
				.title{
					font-size: 32rpx;
					color: #000000;
					line-height: 45rpx;
					margin-bottom: 9rpx;
				}
				.time{
					font-size: 24rpx;
					color: #999999;
					line-height: 26rpx;
					margin-bottom: 19rpx;
				}
				.store{
					margin-bottom: 6rpx;
				}
				.bottom{
					width: 440rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-size: 28rpx;
					line-height: 40rpx;
					.price{
						color: #007664;
					}
				}
			}
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
